<!DOCTYPE html>
<html lang="zh">

<head>

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>页面</title>
    <script src="https://pinzafile.oss-cn-shanghai.aliyuncs.com/vue-element/loading.js"></script>
    <link href="https://pinzafile.oss-cn-shanghai.aliyuncs.com/vue-element/lib/theme-chalk/index.css" rel="stylesheet">
</head>

<body>
<div id="app">
    <el-container>
        <el-header>
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item :to="{ path: '/' }">订单管理</el-breadcrumb-item>
                <el-breadcrumb-item>发货单管理</el-breadcrumb-item>
                <el-breadcrumb-item>更改物流信息</el-breadcrumb-item>
            </el-breadcrumb>
        </el-header>

        <el-main>
            <el-form ref="receiptForm" :model="receiptForm" label-width="80px">
                <el-row>
                    <el-col :xs="24" :sm="14" :md="14" :lg="14" :xl="14">
                        <el-form-item label="收货单号">
                            <el-input :disabled="true" v-model="receiptForm.orderBill_id"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            <#--<el-row>-->
            <#--<el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8" class="spacing">-->
            <#--<el-form-item label="收货单名称">-->
            <#--<el-input v-model="receiptForm.order_name"></el-input>-->
            <#--</el-form-item>-->
            <#--</el-col>-->
            <#--</el-row>-->
                <el-row>
                    <el-col :xs="24" :sm="14" :md="14" :lg="14" :xl="14">
                        <el-form-item label="收货人" prop="consignee_name">
                            <el-input v-model="receiptForm.consignee_name"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :xs="24" :sm="14" :md="14" :lg="14" :xl="14">
                        <el-form-item label="物流单号" prop="transport_billNo">
                            <el-input v-model="transport_billNo"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <br>
                <el-row>
                    <el-col>
                        <el-steps :active="1" simple>
                            <el-step title="收单明细" icon="el-icon-info" style="margin-left:-8%"></el-step>
                        </el-steps>
                    </el-col>
                </el-row>
                <br>
                <el-table :data="receiptForm.context"
                          class="tb-edit"
                          style="width: 100%" size="mini" tooltip-effect="dark">
                    <el-table-column label="发货单编码" prop="orderBill_id" :show-overflow-tooltip=true>
                        <#--<template scope="scope">-->
                            <#--<el-input size="small" v-model="scope.row.orderBill_id" :disabled="true"></el-input>-->
                        <#--</template>-->
                    </el-table-column>
                    <el-table-column label="sku编码" prop="sku_code" :show-overflow-tooltip=true>
                        <#--<template scope="scope">-->
                            <#--<el-input size="small" v-model="scope.row.sku_code" :disabled="true"></el-input>-->
                        <#--</template>-->
                    </el-table-column>
                    <el-table-column label="sku名称" prop="sku_name" :show-overflow-tooltip=true>
                        <#--<template scope="scope">-->
                            <#--<el-input size="small" v-model="scope.row.sku_name" v-model="scope.row.sku_brand"-->
                                      <#--:disabled="true"></el-input>-->
                        <#--</template>-->
                    </el-table-column>
                    <el-table-column label="品牌" prop="sku_brand" max-width="50">
                        <#--<template scope="scope">-->
                            <#--<el-input size="small" v-model="scope.row.sku_brand" :disabled="true"></el-input>-->
                        <#--</template>-->
                    </el-table-column>
                    <el-table-column label="单位" prop="sku_unit" max-width="50">
                        <#--<template scope="scope">-->
                            <#--<el-input size="small" v-model="scope.row.sku_unit" :disabled="true"></el-input>-->
                        <#--</template>-->
                    </el-table-column>
                    <el-table-column label="规格参数" prop="sku_slug_set" :show-overflow-tooltip=true>
                        <#--<template scope="scope">-->
                            <#--<el-input size="small" v-model="scope.row.sku_model" :disabled="true"></el-input>-->
                    <#--</template>-->
                    </el-table-column>
                    <#--<el-table-column label="属性" prop="sku_slug" :show-overflow-tooltip=true>-->
                        <#--<template scope="scope">-->
                            <#--<el-input size="small" v-model="scope.row.sku_slug" :disabled="true"></el-input>-->
                        <#--</template>-->
                    <#--</el-table-column>-->
                    <el-table-column label="单价" prop="sku_contract_price" max-width="50">
                        <#--<template scope="scope">-->
                            <#--<el-input size="small" v-model="scope.row.sku_price" :disabled="true"></el-input>-->
                        <#--</template>-->
                    </el-table-column>
                    <el-table-column label="应收数量" prop="purNum" max-width="100">
                        <#--<template scope="scope">-->
                            <#--<el-input size="small" v-model="scope.row.purNum" :disabled="true"></el-input>-->
                        <#--</template>-->
                    </el-table-column>
                </el-table>
                <br>
                <el-form-item>
                    <el-button type="primary" @click="submitForm">确认</el-button>
                    <a onclick="javascript:history.back(-1);">
                        <el-button>返回</el-button>
                    </a>
                </el-form-item>
            </el-form>
        </el-main>
        <el-footer>

        </el-footer>
    </el-container>
</div>
<script src="https://pinzafile.oss-cn-shanghai.aliyuncs.com/vue-element/dist/vue.js"></script>
<script src="https://pinzafile.oss-cn-shanghai.aliyuncs.com/vue-element/lib/index.js"></script>
<script src="https://pinzafile.oss-cn-shanghai.aliyuncs.com/publiccss/assets/global/plugins/jquery.min.js"
        type="text/javascript"></script>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                receiptForm: {
                    surface_id: '',
                    order_name: '',
                    consignee_name: '',
                    crtTime: '',
                    price: 0,
                    user_id:'',
                    userGroup_id:'',
                    remark: '',
                    context: [],
                    orderBill_flow: 20,
                    type: 'analog',
                    orderBill_id: '',
                },
                transport_company:'',
                transport_billNo:'',
            };
        },
        methods: {
            submitForm(){
                this.getTransportCompany();
                var map = {
                    orderBill_id: "${orderNo}",
                    orderBill_flow: "20",
                    orderBean_pk: "${orderBean_pk}",
                    type: "upt",
                    transport_company: this.transport_company,
                    transport_billNo: this.transport_billNo,
                };
                var boolean=false;
                var msg = "";
                if(this.transport_billNo != ""){
                    $.ajax({
                        url: "${url}/Order/baseBillController/updateSkuRow.json",
                        type: 'POST',
                        data: {
                            obj: JSON.stringify(map)
                        },
                        async: false,
                        success: function (data) {
                            if (data.ret) {
                                boolean = data.ret;
                            } else {
                                msg = data.msg;
                            }
                        }
                    });
                }
            },
            getTransportCompany(){
                var transport_billNo= this.transport_billNo;
                var json = "";
                var boolean = false;
                if(transport_billNo != ""){
                    $.ajax({
                        url: '/order/logistics.json',
                        type: 'get',
                        data: {no: transport_billNo},
                        // contentType: "application/json",
                        async: false,
                        dataType: 'json',
                        success: function (result) {
                            if (result.ret) {
                                boolean=result.ret;
                                json=result.data;
                            }
                        }
                    });
                    if(boolean){
                        this.transport_company=json;
                    }
                }
            },
            ajaxFunction(orderNo,orderBean_pk) {
                var resultData = "";
                var bool = false;
                $.ajax({
                    url: '/order/billDetail.json',
                    type: 'POST',
                    data: {orderNo: orderNo, type: 20,orderBean_pk:orderBean_pk},
                    // contentType: "application/json",
                    async: false,
                    dataType: 'json',
                    success: function (result) {
                        console.log(result.data)
                        if (result.ret) {
                            bool = true;
                            resultData = result.data;//数据记录
                        }
                    }
                });
                if (bool) {
                    this.showDetailMsg(resultData);
                } else {
                    this.open();
                }

            },
            showDetailMsg(resultData) {
                this.receiptForm.order_name = resultData.order_name;
                this.receiptForm.surface_id = resultData.surface_id;
                this.receiptForm.consignee_name = resultData.consignee_name;
                this.receiptForm.price = resultData.price;
                this.receiptForm.user_id=resultData.user_id;
                this.receiptForm.userGroup_id=resultData.userGroup_id;
                if(resultData.remark === 'null'){
                    this.receiptForm.remark ='无';
                }else{
                    this.receiptForm.remark = resultData.remark;
                }
                this.receiptForm.orderBill_id = resultData.orderBill_id;
                var orderDetailList = resultData.context;
                var arr_table = new Array();
                for (var i = 0; i < orderDetailList.length; i++) {
                    var map = orderDetailList[i];
                    var obj_table = new Object();
                    obj_table.orderBill_id = resultData.orderBill_id;
                    obj_table.sku_code = map.sku_code;
                    obj_table.sku_name = map.sku_name;
                    obj_table.sku_brand = map.sku_brand;
                    obj_table.sku_unit = map.sku_unit;
                    obj_table.sku_model = map.sku_model;
                    obj_table.sku_slug_set = map.sku_slug_set;
                    obj_table.sku_price = map.sku_price;
                    obj_table.purNum = map.purNum;
                    obj_table.sendNum = map.sendNum;
                    obj_table.sku_contract_price = map.sku_contract_price;
                    arr_table.push(obj_table);
                }
                this.receiptForm.context = arr_table;

            }
        },
        /** 初始化参数的时候使用 */
        mounted() {
            var orderNo = "${orderNo}";
            var orderBean_pk = "${orderBean_pk}";
            this.ajaxFunction(orderNo,orderBean_pk);
        }
    })
</script>
</body>

</html>